<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="page-id" content="monitor">
    <title>实时监测 - 农业环境气象监测系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="logo">农业环境气象监测系统</div>
            <nav class="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="monitor.html" class="active">实时监测</a></li>
                    <li><a href="#growth">生长调控</a></li>
                    <li><a href="#disease">病虫防治</a></li>
                    <li><a href="#irrigation">灌溉管理</a></li>
                </ul>
            </nav>
        </header>

        <div class="main-content">
            <!-- 左侧参数选择 -->
            <aside class="monitor-sidebar">
                <div class="parameter-list">
                    <h3>监测参数</h3>
                    <div class="parameter-item active" data-param="temperature">
                        <span class="param-icon">🌡️</span>
                        <div class="param-info">
                            <span class="param-name">温度</span>
                            <span class="param-value" id="current-temperature">25.6°C</span>
                        </div>
                    </div>
                    <div class="parameter-item" data-param="humidity">
                        <span class="param-icon">💧</span>
                        <div class="param-info">
                            <span class="param-name">湿度</span>
                            <span class="param-value" id="current-humidity">65%</span>
                        </div>
                    </div>
                    <div class="parameter-item" data-param="light">
                        <span class="param-icon">☀️</span>
                        <div class="param-info">
                            <span class="param-name">光照</span>
                            <span class="param-value" id="current-light">76000 lux</span>
                        </div>
                    </div>
                    <div class="parameter-item" data-param="soil">
                        <span class="param-icon">🌱</span>
                        <div class="param-info">
                            <span class="param-name">土壤湿度</span>
                            <span class="param-value" id="current-soil">42%</span>
                        </div>
                    </div>
                </div>

                <div class="monitor-controls">
                    <h3>数据设置</h3>
                    <div class="control-group">
                        <label>时间范围</label>
                        <select id="timeRange">
                            <option value="1">最近1小时</option>
                            <option value="24" selected>最近24小时</option>
                            <option value="168">最近7天</option>
                            <option value="720">最近30天</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label>刷新间隔</label>
                        <select id="refreshInterval">
                            <option value="5">5秒</option>
                            <option value="30" selected>30秒</option>
                            <option value="60">1分钟</option>
                        </select>
                    </div>
                </div>
            </aside>

            <!-- 主要内容区 -->
            <main class="monitor-content">
                <!-- 数据概览卡片 -->
                <div class="data-overview">
                    <div class="overview-item">
                        <h4>当前值</h4>
                        <div class="current-value" id="overview-current">25.6°C</div>
                    </div>
                    <div class="overview-item">
                        <h4>最高值</h4>
                        <div class="max-value" id="overview-max">28.3°C</div>
                    </div>
                    <div class="overview-item">
                        <h4>最低值</h4>
                        <div class="min-value" id="overview-min">22.1°C</div>
                    </div>
                    <div class="overview-item">
                        <h4>平均值</h4>
                        <div class="avg-value" id="overview-avg">24.5°C</div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="chart-section">
                    <div class="chart-header">
                        <h3>数据趋势</h3>
                        <div class="chart-controls">
                            <button class="btn-chart-type active" data-type="line">折线图</button>
                            <button class="btn-chart-type" data-type="bar">柱状图</button>
                        </div>
                    </div>
                    <div id="mainChart" class="main-chart"></div>
                </div>

                <!-- 数据详情表格 -->
                <div class="data-table-section">
                    <h3>详细数据</h3>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>数值</th>
                                    <th>状态</th>
                                    <th>变化趋势</th>
                                </tr>
                            </thead>
                            <tbody id="dataTableBody">
                                <!-- 由JS动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
        </div>

        <footer class="footer">
            <p>© 2024 农业环境气象监测系统 版权所有</p>
        </footer>
    </div>

    <script src="monitor.js"></script>
</body>
</html> 